<template>
  <view class="content">
    <view class="main">
      <view class="qudao">
        <image src="/static/dy.png"></image>
        <image src="/static/mt.png"></image>
        <image src="/static/dzdp.png"></image>
      </view>
      <view class="input">
        <input v-model.trim="codeValue" placeholder="输入卡券码或扫描卡券二维码验券" />
        <image @click="sendCode" src="/static/sys-big.png"></image>
      </view>
      <!-- <view class="info">
        <view>验券说明：</view>
        <view>1. 打开抖音APP，点击右下角的“我”，然后点击“我的订单”。</view>
        <view>2. 找到你购买的团购券订单，点击“去使用”。</view>
        <view>3. 在弹出的页面中，输入商家提供的验证码，点击“确认”。</view>
        <view>4. 验证成功后，就可以享受团购优惠了。</view>
      </view> -->
      <view class="submit" @click="submitCode">查询</view>
      <view class="list">
                <view class="item box" v-for="item in list" :key="item.id">
                    <view class="item-l">
                        <view class="time">{{item.billiardUseRuleVO?.useTimeLimit}}小时</view>
                        <view class="time-m">满{{item.billiardUseRuleVO?.useTimeLimit}}小时可用</view>
                    </view>
                    <view class="item-r">
                        <view class="name">{{ item.name }}</view>
                        <view class="time">兑换券码：{{ item.thirdCode }}</view>
                    </view>
                    <view class="item-b" @click="goIndex(item.id)">去使用</view>

                </view>
                <!-- <view v-if="list.length == 0" class="noData">
                  暂无可用团购卷
                </view> -->
            </view>
      <!-- <view class="submit">立即开台</view> -->
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from 'vue';
import {listGroupBuy,prepareGroupBuy} from '@/service/index'
import { onLoad, onShow } from "@dcloudio/uni-app";
import dayjs from 'dayjs';
const list = ref([])
const storeId = ref(null)
const checkTab = ref(0);
const codeValue = ref('')
const no = ref(null); // 桌子编号
const type = ref()
onShow(()=>{
  uni.$on('login',function(data){
		console.log('全局登陆事件');
		init();
	})
})
const init = ()=>{
    listGroupBuy().then(res => {
        list.value = res
    })
}
const changeTab = (item) => {
  checkTab.value = item.value;
};
const goIndex = (id)=>{
  uni.setStorageSync('couponList', list.value)
  if(type.value && type.value == 'mine'){
    uni.navigateTo({
		url: `/pages/order/index?couponId=${id}`
	});
    return;
  }
  if(no.value){
    uni.navigateTo({
		url: `/pages/order/placeOrder?id=${storeId.value}&no=${no.value}&couponId=${id}`
	});
  return;
  }
    uni.navigateTo({
		url: `/pages/order/placeOrder?id=${storeId.value}&couponId=${id}`
	});
}
const filterTime = ()=>{
    return dayjs().format('YYYY-MM-DD HH:mm:ss')
}
const sendCode = ()=>{
  uni.scanCode({
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
      codeValue.value = res.result;
      submitCode()
    }
});
}
const submitCode = ()=>{
  prepareGroupBuy(codeValue.value).then(res=>{
    uni.showToast({
      title: '验证成功',
      icon: 'none'
    })
    init();
  })
}
onLoad((options) => {
  storeId.value = options.id
  type.value = options.type
  if(options.no){
    no.value = options.no
  }
    init()
})
</script>
<style lang='less' scoped>
.content {
  // margin: 24rpx;
  .main {
    margin: 24rpx;
    // background-color: #fff;
    border-radius: 20rpx;
    // display: flex;
    // flex-direction: column;
    // height: 100vh;
    // padding: 60rpx 22rpx;
    .qudao {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 52rpx;
      image {
        width: 84rpx;
        height: 84rpx;
      }
      image:nth-child(2) {
        margin-right: 62rpx;
        margin-left: 62rpx;
      }
    }
    .input {
      display: flex;
      align-items: center;
      background: #ffffff;
      border-radius: 48rpx;
      border: 2rpx solid #009a44;
      width: 100%;
      height: 96rpx;
      padding: 0 44rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;
      input {
        height: 100%;
        width: 100%;
        flex: 1;
      }
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .info {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
      line-height: 56rpx;
      margin-bottom: 24rpx;
    }
    .list {
            // padding: 0 24rpx;
            // flex: 1;
            // overflow-y: scroll;
            padding-bottom: 30rpx;
            position: relative;
            .item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                height: 220rpx;
                padding: 0 24rpx;

                .item-l {
                    text-align: center;

                    .time {
                        font-size: 36rpx;
                        font-weight: 600;
                        color: #FF5D15;
                        margin-bottom: 10rpx;
                    }

                    .time-m {
                        background: rgba(255, 93, 21, 0.1);
                        padding: 8rpx 12rpx;
                        border-radius: 8rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #FF5D15;
                    }
                }

                .item-r {
                   margin-right: 10rpx;
                   margin-left: 10rpx;
                    font-size: 30rpx;
                    font-weight: 600;
                    color: #333333;
					flex: 1;
                    .name{
                        margin-bottom: 20rpx;
                    }
                    .time {
                        font-size: 26rpx;
                        color: #999999;
                        font-weight: 400;
                    }
                }
                .item-b{
                    min-width:116rpx;
                    width: 116rpx;
                    height: 64rpx;
                    background: #009A44;
                    border-radius: 32rpx;
                    font-size: 28rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 64rpx;
                }
                .icon {
                    width: 36rpx;
                    height: 36rpx;
                }
            }
            .noData{
              position: fixed;
              top: 40%;
              left: 50%;
              transform: translateX(-50%);
            }
        }
    .submit {
      height: 100rpx;
      background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
      border-radius: 60rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 20rpx;
    }
  }
}
</style>